<template>
  <div>
    <my-form-drawer
      title="选择设备/标签"
      :width="400"
      :visible="visible"
      @ok="ok"
      @cancel="onClose"
    >
      <a-radio-group v-model="form.relType" button-style="solid">
        <a-radio-button value="1" >
          设备
        </a-radio-button>
        <a-radio-button value="2" :disabled="tempOldRelType == 1 || lock == 1">
          标签
        </a-radio-button>
      </a-radio-group>
      <div class="devList">
        <template v-if="form.relType == 1">
          <div class="devItem"
            :class="form.devId == item.id?'active':''"
            @click="form.devId = item.id"
            :title="item.devName" 
            v-for="(item,index) in devList"
            :key="index">{{item.devName}}</div>
        </template>
        <template v-else>
          <div class="devItem" 
            :class="form.tagId == item.id?'active':''"
            @click="form.tagId = item.id"
            :title="item.tagName" 
            v-for="(item,index) in labelList"
            :key="index">{{item.tagName}}</div>
        </template>
      </div>
      <div class="devNull" v-if="form.relType==1 && devList=='' ">
        <a-icon type="hdd"  :style="{color:'#9B9B9B', fontSize:'100px',margin:'200px 30px 30px 120px'}" />
        <div style="margin-left:30px">未有设备接入，请前往“设备管理”添加设备。</div>
      </div>
      <div class="tableNull" v-else-if="form.relType==2 && labelList==''">
        <a-icon type="tags" :style="{color:'#9B9B9B',fontSize:'100px',margin:'200px 30px 30px 120px'}" />
        <div style="margin-left:30px">未有标签接入，请前往“设备标签”添加标签。</div>
      </div>
    </my-form-drawer>
  </div>
</template>

<script>
import MyFormDrawer from "@/components/drawer/MyFormDrawer";
import { list as devList } from "@/services/device";
import { list as labelList } from "@/services/deviceTag";

export default {
  name: "LedDeviceForm",
  components: { MyFormDrawer },
  data() {
    return {
      visible:false,
      devList: [],
      labelList:[],
      form: {
        relType:'1',
        devId:0,
        tagId:0
      },
      page: {
        page: 1,
        pageSize:200
      },
      tempOldRelType:''
    };
  },
  props: {
    oldRelType: {
      type: String,
      default: ''
    },
    lock: {
      type: String,
      default: ''
    },
  },
  computed: {},
  created() {
    this.tempOldRelType = this.oldRelType;
    console.log(this.lock);
    console.log(this.tempOldRelType);
    this.getDevList();
    this.getLabelList();
  },
  watch: {
    oldRelType(newVal){
      this.tempOldRelType = newVal;
      console.log(this.tempOldRelType);
    },
    lock(newVal){
      this.lock = newVal;
    }
  },
  methods: {
    getDevList(){
      devList({
        page: this.page.page,
        pageSize: this.page.pageSize
      }).then(({data}) => {
        if (data.code == 0) {
          this.devList = data.data.list;
        }
      })
    },
    getLabelList(){
      labelList({
        page: this.page.page,
        pageSize: this.page.pageSize
      }).then(({data}) => {
        if (data.code == 0) {
          this.labelList = data.data.list;
        }
      })
    },
    changeForm(state, action) {
      this.visible = state;
      this.type = action;
    },
    initData() {
      this.form = {
        relType:'1',
        devId:0,
        tagId:0
      };
    },
    onClose() {
      this.visible = false;
      this.initData();
    },
    ok(){
      let name,width,height;
      if(!this.form.devId && !this.form.tagId){
        this.$message.warning('请选择设备');
        return false;
      }
      if(this.form.relType == '1'){
        let index = this.devList.findIndex(item => item.id == this.form.devId);
        name = this.devList[index]['devName'];
        width = this.devList[index]['xdpi'];
        height = this.devList[index]['ydpi'];
      } else{
        let index = this.labelList.findIndex(item => item.id == this.form.tagId);
        name = this.labelList[index]['tagName'];
        width = 500;
        height = 200;
      }
      this.$emit('send',{
        relType:this.form.relType,
        devId:this.form.devId,
        tagId:this.form.tagId,
        name:name,
        width:width,
        height:height
      })
      this.onClose();
    }
  }
};
</script>

<style lang="less" scoped>
.devList{
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  .devItem{
    width: 80px;
    height: 30px;
    background-color: rgb(247, 241, 241);
    margin-right: 10px;
    cursor: pointer;
    margin-bottom: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 4px 8px;
    font-size: 13px;
    display:inline-block;
    text-align: center;
  }
  .active{
    background-color: #2979e7;
    color: #fff;
  }
  .devNull{
    display: flex;
  }
  .tableNull{
    display: flex;
  }
}

</style>
